//引入样式
require('../../assets/css/normalize.css')
require('../../assets/css/reset.css')
require('./mine_modify.less');

//引入模块
const dom = require('../../utils/dom.js');
const axios = require('../../utils/axios.js');

document.addEventListener("DOMContentLoaded", function () {
    //1. 点击回到上一页
    dom.get('#backBtn').addEventListener('click', function () {
        history.back();
    });

    //2. 点击显示性别选择框
    dom.get('#gender').addEventListener('click', function () {
        weui.picker([
            { label: '男', value: 0 },
            { label: '女', value: 1 },
            { label: '保密', value: 2 }
        ], {
            onConfirm: function (result) {
                dom.get('#gender').textContent = result[0].label;
                dom.get('#gender').dataset.value = result[0].value;
            },
            title: '请选择性别'
        });
    });

    //3. 显示日期选择框
    dom.get('#birthday').addEventListener('click', function () {
        weui.datePicker({
            start: 1900,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                // let d = result[0].value + '-' + result[1].value + '-' + result[2].value;
                let d = result.map(v => v.value).join('-');
                dom.get('#birthday').textContent = d;
            },
            title: '请选择出生日期'
        });
    });

    //4. 上传头像
    dom.get('#avatorbox').addEventListener('change', function () {
        //通过FormData构造上传文件数据
        let fd = new FormData();
        fd.append('file', this.files[0]);

        //将构造好的文件，通过接口发送到服务器
        axios.post('/api/shared/uploadPortrait', fd).then(res => {
            if (res.data.errno === 0) {
                //上传成功
                dom.get('#avator').src = axios.defaults.baseURL + res.data.data.url;
                dom.get('#avator').dataset.value = res.data.data.url; //用来提交的地址
            } else {
                //上传失败
                alert('上传失败');
            }
        });
    });

    //5. 省市二级联动
    let provinceId = 0;
    dom.get('#province').addEventListener('click', async function () {
        //获取省份数据
        let pro = await axios.get('api/shared/province');

        //将省份数据处理成weui需要的数据
        let proArr = pro.data.data.map(v => {
            return { label: v.name, value: v.id }
        });

        weui.picker(proArr, {
            onConfirm: function (result) {
                dom.get('#province').textContent = result[0].label;
                dom.get('#province').dataset.value = result[0].value;
                provinceId = result[0].value; //将选择的省份ID赋值出来
            },
            title: '请选择省份'
        });
    });

    //6. 城市联动
    dom.get('#city').addEventListener('click', async function () {
        //判断有没有选择省份，如果没有提示
        if (provinceId === 0) {
            alert('请选择省份');
            return;
        }

        //发请求获取城市数据
        let city = await axios.get('/api/shared/city?provinceId=' + provinceId);
        let cityArr = city.data.data.map(v => {
            return { label: v.name, value: v.id }
        });

        weui.picker(cityArr, {
            onConfirm: function (result) {
                dom.get('#city').textContent = result[0].label;
                dom.get('#city').dataset.value = result[0].value;
            },
            title: '请选择城市'
        });
    });

    //7. 签名统计
    dom.get('#sign').addEventListener('input', function () {
        dom.get('#textNum').textContent = this.value.length;
    });

    //8. 上传个人资料数据
    dom.get('#saveBtn').addEventListener('click', function () {
        //获取数据
        let nickName = dom.get('#nickname').value;
        let gender = Number(dom.get('#gender').dataset.value);
        let provinceId = Number(dom.get('#province').dataset.value);
        let cityId = Number(dom.get('#city').dataset.value);
        let birthday = dom.get('#birthday').textContent;
        let imgUrl = dom.get('#avator').dataset.value;
        let sign = dom.get('#sign').value;

        //发请求
        axios.post('/api/user/changeInfo', {
            nickName,
            gender,
            provinceId,
            cityId,
            birthday,
            imgUrl,
            sign,
        }).then(res => {
            if (res.data.errno === 0) {
                //存储token
                localStorage.setItem('token', res.data.data.token);
                history.back();
                alert('修改成功');
            } else {
                alert('修改失败');
            }
        });

    });

    //9. 个人资料数据回填
    axios.get('/api/user/info').then(async (res) => {
        let data = res.data.data;

        //回填头像
        dom.get('#avator').src = axios.defaults.baseURL + data.imgUrl;
        dom.get('#avator').dataset.value = data.imgUrl;
        //昵称
        dom.get('#nickname').value = data.nickName;
        //性别
        let genderArr = ['男', '女', '保密'];
        dom.get('#gender').textContent = genderArr[data.gender];
        dom.get('#gender').dataset.value = data.gender || 0;
        //生日
        dom.get('#birthday').textContent = data.birthday;
        //省份
        let pro = await axios.get('api/shared/province');
        let [province] = pro.data.data.filter(v => v.id === data.provinceId);
        dom.get('#province').textContent = province.name;
        dom.get('#province').dataset.value = data.provinceId;
        //城市
        let city = await axios.get('/api/shared/city?provinceId=' + data.provinceId);
        let [curCity] = city.data.data.filter(v => v.id === data.cityId);
        dom.get('#city').textContent = curCity.name;
        dom.get('#city').dataset.value = data.cityId;
        //个性签名
        dom.get('#sign').value = data.sign;
        dom.get('#textNum').textContent = data.sign.length;
    });
});